$(document).ready(function() {
    var uuid = guid(); // uuid在一个会话唯一
    var nameOnline = ''; // 上线姓名
    var onlineName = new Map(); // 已上线人员, <requestId, name>

    $("#name").attr("disabled", "disabled");
    $("#onlineBtn").attr("disabled", "disabled");
    $("#downlineBtn").attr("disabled", "disabled");

    $("#banana").hide();

    // 初始化websocket
    var socket;
    if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }
    if (window.WebSocket) {
        socket = new WebSocket("ws://localhost:4001/");
        socket.onmessage = function(event) {
            console.log("收到服务器消息:" + event.data);
            if (event.data.indexOf("isSucc") != -1) { // 这里需要判断是客户端请求服务端返回后的消息（response）
                var response = JSON.parse(event.data);
                if (response != undefined && response != null) {
                    if (response.serviceId == 1001) { // 上线
                        if (response.isSucc) {
                            // 上线成功，初始化已上线人员
                            onlineName.clear();
                            $("#showOnlineNames").empty();
                            for (var reqId in response.hadOnline) {
                                onlineName.put(reqId, response.hadOnline[reqId]);
                            }
                            initOnline();

                            $("#name").attr("disabled", "disabled");
                            $("#onlineBtn").attr("disabled", "disabled");
                            $("#downlineBtn").removeAttr("disabled");
                            $("#banana").show();
                        } else {
                            alert("上线失败");
                        }
                    } else if (response.serviceId == 1004) {
                        if (response.isSucc) {
                            onlineName.clear();
                            $("#showBanana").empty();
                            $("#showOnlineNames").empty();
                            $("#name").removeAttr("disabled");
                            $("#onlineBtn").removeAttr("disabled");
                            $("#downlineBtn").attr("disabled", "disabled");
                            $("#banana").hide();
                        } else {
                            alert("下线失败");
                        }
                    }
                }
            } else { // 还是服务端向客户端的请求（request）
                var request = JSON.parse(event.data);
                if (request != undefined && request != null) {
                    if (request.serviceId == 1001 || request.serviceId == 1004) { // 有人上线/下线
                        if (request.serviceId == 1001) {
                            onlineName.put(request.requestId, request.name);
                        }
                        if (request.serviceId == 1004) {
                            onlineName.removeByKey(request.requestId);
                        }

                        initOnline();
                    } else if (request.serviceId == 1003) { // 有人发消息
                        appendBanana(request.name, request.message);
                    }
                }
            }
        };
        socket.onopen = function(event) {
            $("#name").removeAttr("disabled");
            $("#onlineBtn").removeAttr("disabled");
            console.log("已连接服务器");
        };
        socket.onclose = function(event) { // WebSocket 关闭
            console.log("WebSocket已经关闭!");
        };
        socket.onerror = function(event) {
            console.log("WebSocket异常!");
        };
    } else {
        alert("抱歉，您的浏览器不支持WebSocket协议!");
    }

    // WebSocket发送请求
    function send(message) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(message);
        } else {
            console.log("WebSocket连接没有建立成功!");
            alert("您还未连接上服务器，请刷新页面重试");
        }
    }

    // 刷新上线人员
    function initOnline() {
        $("#showOnlineNames").empty();
        for (var i = 0; i < onlineName.size(); i++) {
            $("#showOnlineNames").append('<tr><td>' + (i + 1) + '</td>' +
                '<td>' + onlineName.element(i).value + '</td>' +
                '</tr>');
        }
    }
    // 追加聊天信息
    function appendBanana(name, message) {
        $("#showBanana").append('<tr><td>' + name + ': ' + message + '</td></tr>');
    }

    $("#onlineBtn").bind("click", function() {
        var name = $("#name").val();
        if (name == null || name == '') {
            alert("请输入您的尊姓大名");
            return;
        }

        nameOnline = name;
        // 上线
        send(JSON.stringify({
            "requestId": uuid,
            "serviceId": 1001,
            "name": name
        }));
    });

    $("#downlineBtn").bind("click", function() {
        // 下线
        send(JSON.stringify({
            "requestId": uuid,
            "serviceId": 1004
        }));
    });

    $("#sendBtn").bind("click", function() {
        var message = $("#messageInput").val();
        if (message == null || message == '') {
            alert("请输入您的聊天信息");
            return;
        }

        // 发送聊天消息
        send(JSON.stringify({
            "requestId": uuid,
            "serviceId": 1002,
            "name": nameOnline,
            "message": message
        }));
        $("#messageInput").val("");
    });

});